<template>
    <div class="background">
      <van-row>
        <van-col span="24">
          <van-nav-bar fixed :border="false" style="background: none;"
                       @click-left="onClickLeft"
                       placeholder
                       safe-area-inset-top >
            <template #left>
              <van-icon color="black" style="font-weight:bolder;" name="arrow-left" size="20" />
              <span>返回</span>
            </template>
          </van-nav-bar>
        </van-col>

        <van-col span="24" style="margin-top: 6rem;">
          <van-cell-group :border="false" style="background: none;">
            <van-cell  :border="false" style="background: none;margin-left: 10px;">
              <template #title>
                <span class="p1">设置新的密码</span>
              </template>
              <template #label>
                <span  class="p2"> 设置密码用于登录 胖虎外卖 </span>
                <span  class="p3"> 密码格式 6-12位数字加英文 </span>
              </template>
            </van-cell>
            <!-- 密码输入框 -->
            <van-cell :border="false">
              <van-form  @submit="onSubmit">
                <van-field
                    style="background: none;"
                    v-model="password"
                    type="password"
                    name="密码"
                    placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                >
                </van-field>
                <div style="margin: 16px;">
                  <van-button round block type="info" native-type="submit">完成</van-button>
                </div>
              </van-form>
            </van-cell>
          </van-cell-group>
        </van-col>
      </van-row>
    </div>
</template>

<script>
export default {
  name: "setPassword",
  data(){
    return{
      password:'',
    }
  },
  methods:{
    onClickLeft(){
      this.$router.replace("/authCode");
    },
    onSubmit(){

      this.$toast.loading({
        message: '正在设置密码...',
        forbidClick: true,
        onClose:()=>{
            this.$toast.success("设置成功")
            this.$router.replace("/Login")
        }
      });

    }
  }

}
</script>

<style scoped>
.background{
  position: absolute;top: 0px; bottom: 0px; width: 100%; background: white;
}
.p1{
  font-size: 1.5rem; letter-spacing:.1em;  font-weight: bolder;
}
.p2{
  font-size: 1rem; letter-spacing: 0.1em; padding-top: 1rem; display: block;
}
.p3{
  font-size: 0.6rem; letter-spacing: 0.1em; padding-top: 1rem; display: block;
}
</style>
